<template>
  <div>
    <el-select v-model="language" @change="changeLanguageEvent">
      <el-option v-for="item in langOptions" :key="item.value" :label="item.lable" :value="item.value">
      </el-option>
    </el-select>
    <div class="system">语言信息：{{ $t('msg1') }}</div>

    <el-tabs value="personal_pw">
      <el-tab-pane label="個人賬號登錄" name="personal_pw">
        <v-icon name="bi-music-player" />
        <el-input placeholder="賬號"></el-input>
        <!-- <font-awesome-icon icon="fa-solid fa-user-secret" /> -->
        <el-button type="primary" round style="width:300px;margin-top:10px" @click="login">{{$t("login_btn")}}</el-button>
      </el-tab-pane>
      <el-tab-pane label="相信登錄" name="believe">

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "index",
  created() { },
  data() {
    return {
      language: localStorage.getItem("lang") || "en",
      langOptions: [
        { value: "en", lable: "英文" },
        { value: "zh", lable: "中文" }
      ]
    }
  },
  props: {},
  methods: {
    changeLanguageEvent(e) {
      console.debug("==========" + e);
      console.debug(this.$i18n)
      if (e === "en") {
        localStorage.setItem("lang", "en");
        this.$i18n.locale = localStorage.getItem("lang");
        this.language = "en";
        location.reload();
      } else if (e === "zh") {
        localStorage.setItem("lang", "zh");
        this.$i18n.locale = localStorage.getItem("lang");
        this.language = "zh";
        location.reload();
      } else {
        localStorage.setItem("lang", "en");
        this.$i18n.local = localStorage.getItem("lang");
        this.language = "en";
        location.reload();
      }
    },
    login:function(e){
      alert(123)
      this.router.push()("/home");
    }
  },
  mounted: function () {
    //todo
    console.debug("========lang=======")
    console.debug(this.$i18n);
    this.$i18n.locale = this.language
    console.debug("========lang locale=======" + this.$i18n.locale)
  },
};
</script>

<style lang="scss" scoped></style>